<style>
    .server-block {
        padding-bottom: 80px;
        background: #151515;
    }
    .server-block .title{
        background-image: url(https://cdn.shopify.com/s/files/1/0724/8655/1846/files/bg.png?v=1692072984);
        background-color: #fff;
        padding: 98px 26px;
        margin: 0;
        color: #fff;
        background-repeat: no-repeat;
        height: 100%;
        background-size: 100% 100%;
    }
    .server-block ul{
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-gap: 24px;
      color: #fff;
    }
    .server-block li{
        display: flex;
        cursor: pointer;
    }
    .server-block hr{
        margin: 0;
        background: #fff;
    }
    .server-block .text{
        padding-bottom: 20px;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }
    .server-block li .html{
        margin-right: 10px;
    }
    .server-block li .html path{
        stroke: #4D4D4D;
    }
    .server-block li.active:hover .html path{
        stroke: #fff;
    }
    .text-block p{
        margin-top: 10px;
    }
    .text-block a{
        color: #2F80ED;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-decoration: none;
    }
    .server-block .text-bottom{
        position: relative;
        overflow: hidden;
        align-items: center;
        margin: 80px 0 0;
        padding: 40px;
        border-radius: 8px;
        background: #000;
    }
    .server-block .text-bottom .grid__item{
        padding: 0;
    }
    .server-block .text-bottom .grid__item:first-child{
        max-width: 26%;
        width: 26%;
    }
    .server-block .text-bottom .grid__item:last-child{
        max-width: 74%;
        width: 74%;
        padding-left: 80px;
        padding-right: 66px;
    }
    .server-block .text-bottom .grid__item div{
        color: #fff;
        border-radius: 8px;
    }
    .server-block .text-bottom .text{
        padding-bottom: 10px;
        color: #FFF;
        font-size: 36px;
        font-weight: 700;
        line-height: 48px; 
    }
    .server-block .text-bottom .richtext p{
        margin: 0;
        color: #FFF;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }
    .server-block .text-bottom a{
        margin-top: 66px;
        font-size: 14px;
        font-weight: 700;
        background: #fff;
        color: #000;
        padding: 3px 20px 3px 3px;
    }
    .server-block .text-bottom .icon-union{
        position: absolute;
        right: -14px;
        bottom: -26px;
        z-index: 1;
    }
    .server-block .text-bottom a span{
        width: 38px;
        height: 38px;
        margin-right: 28px;
    }
    .des-content{
        display: none;
    }

 @media screen and (max-width: 990px){
    .server-block .text-bottom .grid__item div {
        border-radius: 8px;
    }
    .server-block .title{
        padding: 40px 26px;
        font-size: 22px;
        position: relative;
        background: none;
    }
    .server-block .title span{
        position: absolute;
        text-align: center;
        padding: 0 20px;
        width: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }
    .server-block .title::before{
        content: '';
        background-image: url(https://cdn.shopify.com/s/files/1/0724/8655/1846/files/bg-serverpng.png?v=1692257472);
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        z-index: 1;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
    .server-block ul {
        display: block;
    }
    .server-block .text br{
        display: none;
    }
    .server-block ul {
        display: block;
        padding: 0 26px;
        border-radius: 0;
    }
    .server-block li {
        align-items: flex-start;
    }
    .tenways-dominance .server-block .text {
        font-size: 24px;
        line-height: 32px;
        padding-top: 2px;
    }
    .text-block p {
        margin-top: 0;
    }
    .text-block a {
        margin-top: 10px;
        display: inline-block;
    }
    .tenways-dominance li .text{
        opacity: .2;
    }
    .tenways-dominance li.active:hover .text{
        opacity: 1;
    }
    .server-block hr{
        display: none;
    }
    .server-block {
        padding-bottom: 0;
        background: #111;
    }
    .server-block .text-bottom {
        margin: 40px 0 0;
        padding: 0 26px 40px;
    }
    .tenways-dominance .server-block .text-bottom .grid__item{
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .server-block .image_mobile {
      display: block;
    }
    .server-block .page-width{
      padding: 0;
    }
    .server-block .text-bottom .text {
        padding-bottom: 0;
        margin: 20px 0;
    }
    .tenways-dominance .server-block .text-bottom a {
        margin-top: 40px;
    }
    .server-block .grid__item:last-child{
        position: relative;
    }
    .server-block .text-bottom .icon-union svg{
        height: 202px;
        width: auto;
    }
    .server-block .text-bottom .icon-union {
        right: -26px;
        bottom: auto;
        top: 58%;
        transform: translateY(-50%);
    }
    .server-block li .html{
        opacity: 0;
    }
    .server-block li.active:hover .html{
        opacity: 1;
    }
}
</style>
<div class="server-block">
    {% if section.settings.title != blank %}
        <h2 class="title">
            <span>{{ section.settings.title | escape }}</span>
        </h2>
    {% endif %}
    <div class="page-width"> 
        <ul>
            {% for block in section.blocks %}
               <li>
                  {% if block.settings.html != blank %}
                      <span class="html">{{ block.settings.html }}</span>
                  {% endif %}
                  {% if block.settings.text != blank %}
                      <div class="text-block">
                          <div class="text">{{ block.settings.text }}</div>
                          {% if block.settings.richtext != blank %}
                          <div class="des-content">
                              <hr>
                              <div class="richtext">{{ block.settings.richtext }}</div>   
                              {% if block.settings.button_label != blank %}
                                  <a{% if block.settings.button_link == blank %} aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
                                  {{ block.settings.button_label | escape }}
                                  </a>  
                              {% endif %} 
                          </div>
                          {% endif %} 
                      </div>
                  {% endif %}    
               </li>
            {% endfor %}
        </ul>
        <div class="text-bottom grid">
            <div class="grid__item">
            <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
            >
                {%- if section.settings.image != blank -%}
                <img
                    srcset="
                    {%- if section.settings.image.width >= 290 -%}{{ section.settings.image | img_url: '290x' }} 290w,{%- endif -%}
                    {%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                    {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                    {%- if section.settings.image.width >= 1400 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                    {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                    {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                    {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                    {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                    {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
                    data-src="{{ section.settings.image | img_url: '1500x' }}"
                    alt="{{ section.settings.image.alt | escape }}"
                    loading="lazy"
                    class="lazyload"
                    width="{{ section.settings.image.width }}"
                    height="{{ section.settings.image.height }}"
                >
                {%- else -%}
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                {%- endif -%}
            </div>
            <div class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
                >
                {%- if section.settings.image_mobile != blank -%}
                <img
                srcset="{%- if section.settings.image_mobile.width >= 375 -%}{{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 412 -%}{{ section.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 1100 -%}{{ section.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 1780 -%}{{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 1903 -%}{{ section.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
                {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
                sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                src="{{ section.settings.image_mobile | img_url: '1500x' }}"
                loading="lazy"
                alt="{{ section.settings.image_mobile.alt | escape }}"
                width="{{ section.settings.image_mobile.width }}"
                height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}"
                >
                {%- else -%}
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                {%- endif -%}
            </div>
            </div>
            <div class="grid__item">
                {% if section.settings.text != blank %}
                    <div class="text">{{ section.settings.text }}</div>
                {% endif %}
                {% if section.settings.richtext != blank %}
                    <div class="richtext">{{ section.settings.richtext }}</div>
                {% endif %}
                <a onclick="zE('messenger', 'open');" class="webWidget button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}">
                  <span> {% render 'icon-support' %} </span>   {{ section.settings.button_label | escape }}
                </a>
                <div class="icon-union">
                    {% render 'icon-union' %}
                </div>
            </div>
       </div>
    </div>
</div>


<script>
    var mouseover_tid = [];
    var mouseout_tid = [];
    $(document).ready(function() {
        $(".server-block li").each(function(index) {
            $(this).hover(
                function() {
                    var _self = this;
                    clearTimeout(mouseout_tid[index]);
                    mouseover_tid[index] = setTimeout(function() {
                        $(_self).addClass('active').find('.des-content').slideDown(300);
                    }, 200);
                },
                function() {
                    var _self = this;
                    clearTimeout(mouseover_tid[index]);
                    mouseout_tid[index] = setTimeout(function() {
                        $(_self).removeClass('active').find('.des-content').slideUp(300);
                    }, 200);
                }
            );
        });
    });
</script>



{% schema %}
    {
      "name": "Tenways dominance",
      "class": "spaced-section spaced-section--full-width tenways-dominance",
      "tag": "section",
      "settings": [
        {
           "type": "text",
           "id": "title",
           "label": "Title"
        },
        {
           "type": "text",
           "id": "text",
           "label": "Text"
        },
        {
           "type": "richtext",
           "id": "richtext",
           "label": "Richtext"
        },
        {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
        },
        {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
        },
        {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "button_link"
        }
      ],
      "blocks": [
      {
        "type": "column",
        "name": "column",
        "settings": [
          {
            "type": "html",
            "id": "html",
            "label": "Icon"
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text"
          },
          {
            "type": "richtext",
            "id": "richtext",
            "label": "Richtext"
          },
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "t:sections.rich-text.blocks.button.settings.button_label.label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.rich-text.blocks.button.settings.button_link.label"
        }
        ]
       }
      ],
      "presets": [
        {
          "name": "Tenways dominance"
        }
      ]
    }
    {% endschema %}
    